<style scoped>
  .login{
    height:100%;
    width: 100%;
    background: -webkit-linear-gradient(left top,#91A5F8,#3B59FF);
  }
  .head-left{
    position: absolute;
    width:40px;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 22px;
    color: #ffffff;
  }

  .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-top: 50px;
  }
  input{
    border:none;
  }

  .input{
    width:100%;
  }
  .input>div{
    margin:0 10%;
  }
  .input>div>.zhmm{
    background: #ffffff;
    border-radius: 10px;
  }
  .input>div>.zhmm>div{
    display: flex;
    align-items: center;
  }
  .input>div>.zhmm>div>label{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items:center;
  }
  .input>div>.zhmm>div>input{
    flex: 5;
    display: flex;
    align-items: center;
    height:80%;
    margin-right: 10px;
  }
  .input>div>.zhmm>div.name{
    border-bottom: 1px solid #e9e9e9;
    box-sizing: border-box;
  }
  .input>div>.zhmm label{
    font-size: 18px;
  }
  .submit{
    margin-top: 30px;
    border-radius: 10px;
    background: #ffffff;
  }
  .submit>a{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .register{
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .register p{
    color: #ffffff;
  }
  .register p a{
    color: #ffffff;
  }
  @media screen and (max-width: 320px) {
    .logo{
      width:90px;
      height:90px;
      margin-top: 50px;
      margin-bottom: 40px;
    }
    .input>div>.zhmm>div{
      height:43px;
    }
    .submit{
      height:43px;
    }
    .input>div>.zhmm>div>input{
      font-size: 1.2rem;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .logo{
      width:110px;
      height:110px;
      margin-top: 70px;
      margin-bottom: 40px;
    }
    .input>div>.zhmm>div{
      height:50px;
    }
    .submit{
      height:50px;
    }
    .input>div>.zhmm>div>input{
      font-size: 1.4rem;
    }
  }
  @media screen and (min-width: 376px){
    .logo{
      width:120px;
      height:120px;
      margin-top: 80px;
      margin-bottom: 40px;
    }
    .input>div>.zhmm>div{
      height:60px;
    }
    .submit{
      height:60px;
    }
    .input>div>.zhmm>div>input{
      font-size: 1.6rem;
    }
  }
  /*验证*/
  .test{
    margin-left: 20px;
    margin-top: 4px;
    color: #e43937;
  }
  .name{
    position: relative;
  }
  .name>p{
    position: absolute;
    top:14px;
    right:10px;
  }
  .password{
    position: relative;
  }
  .password>p{
    position: absolute;
    right:10px;
    top:14px;
  }
</style>

<template>
  <div class="login" ref="nana">
    <div class="header">
      <div class="head-top"></div>
      <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
    </div>
    <div class="content">
      <!--<div>-->
      <!---->
      <!--</div>-->
      <div class="logo">
        <img src="../assets/img/loginlogo.png" width="100%" height="100%" alt="">
      </div>
      <div class="input">
        <div>
          <form></form>
          <div class="zhmm">
            <div class="name">
              <label><p>账户</p></label>
              <input type="tel" placeholder="请输入手机号码" v-model="phone">
              <p class="iconfont icon-guanbi" @click="clearPhone"></p>
            </div>
            <small class="test" v-if="hasPhone">{{testPhone}}</small>
            <div class="password">
              <label><p>密码</p></label>
              <input type="password" placeholder="请输入登录密码" v-model="pwd" id="pwd1">
              <p class="iconfont" v-bind:class="{'icon-attention_forbid': isVisible1,'icon-attention_forbid1': isVisible2}" @click="pwdIsVisible1"></p>
            </div>
            <small class="test" v-if="hasPwd">{{testPwd}}</small>
          </div>
          <div class="submit" @click="login">
            <router-link to="">
              <h3>登录</h3>
            </router-link>
          </div>
          <div class="register">
            <router-link to="register"><p>立即注册</p></router-link>
            <p>&nbsp;|&nbsp;</p>
            <router-link to="reset"><p>忘记密码</p></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import axios from 'axios'
  import { Toast } from 'mint-ui'
  import host from '../config.js'
//  import { mapActions } from 'vuex'
//  import { USER_LOGIN } from '../store/user'

  export default {

    data () {
      return{
        phone: null,
        pwd: null,
        token: null,
        hasPhone: false,
        hasPwd: false,
        testPhone: null,
        testPwd: null,
        //        密码是否可见
        isVisible1: true,
        isVisible2: false
      }
    },
    watch: {
      phone: function (newValue, oldValue) {
        if (newValue !== ''){
          this.hasPhone = false
        }
      },
      pwd: function (newValue, oldValue) {
        if (newValue !== ''){
          this.hasPwd = false
        }
      }
    },
    mounted: function() {
//      console.log(VeeValidate)
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      this.$refs.nana.style.height = h + 'px'
    },
    methods: {
      goBack () {
        this.$router.push('/index')
      },
      login () {

        let store = this.$store
        if (this.phone === '' || this.phone === null) {
          // this.hasPhone = true
          Toast({
            message: '账户不能为空',
            duration: 1000
          })
          // this.testPhone = '账户不能为空'
          return
        }
        if (this.pwd === '' || this.pwd === null) {
          Toast({
            message: '密码不能为空',
            duration: 1000
          })
          // this.hasPwd = true
          // this.testPwd = '密码不能为空'
          return
        }
        let d_id,os,d_name,sendData
        if(window.localStorage.getItem('device') && window.localStorage.getItem('device')!= 'null') {
          let device = JSON.parse(window.localStorage.getItem('device'))
          let device2 = window.localStorage.getItem('device2')
          d_id = device.uuid
          if(window.localStorage.getItem('device2') && window.localStorage.getItem('device2')!= 'null'){
            d_id = device2
          }
          os = device.platform + '-' + device.version
          d_name = device.model
          sendData = {
            "phone": this.phone,
            "passwd": this.pwd,
            "d_id": d_id,
            "os": os,
            "d_name": d_name
          }
        } else {
          sendData = {
            "phone": this.phone,
            "passwd": this.pwd
          }
        }

        let that = this
        axios({
          method: 'post',
          url: host.host + "/api/usr/login",
          data: JSON.stringify(sendData)
        }).then(function (data) {
          if(data.data.code !== 200) {
            Toast({
              message: data.data.msg,
              duration: 1000
            })
          }else{
            let token = data.data.data.token
            let localStorage = window.localStorage
            localStorage.setItem("token",token)
            store.state.user = token
            that.baseService.defaults.headers.Authorization = token;
            if(token){
              axios({
                method: 'get',
                url: host.host + "/api/usr/updateInfo",
                headers: {'Authorization': token}
              }).then(function (data) {
                if(data.data.code === 200) {
                  if(data.data.data.risk_level){
                    Toast({
                      message: '登录成功',
                      duration: 1000
                    })
                    let interval = window.setTimeout(function() {
                      that.$router.push({'path':'/index'})
                    }, 1000)
                  }else{
                    that.$router.push({'path':'/risk?time=first'})
                  }
                }else{
                  Toast({
                    message: '用户名或密码错误',
                    duration: 1000
                  })
                }
              })

            }
            localStorage.setItem("token",token)
          }
        })
      },
      clearPhone () {
        this.phone = null
      },
      pwdIsVisible1 () {
        this.isVisible1 = !this.isVisible1
        this.isVisible2 = !this.isVisible2
        if(document.getElementById('pwd1').getAttribute('type') === 'password'){
          document.getElementById('pwd1').setAttribute('type','text')
        }else{
          document.getElementById('pwd1').setAttribute('type','password')
        }
      }
    }
  }
</script>
